<template>
	<view class="staff-form">
		<base-navbar back-color="#fff" title="店员管理"></base-navbar>
		<view class="form">
			<view class="form-item">
				<text class="label">联系人</text>
				<view class="form-input">
					<input v-model="detail.consignee" class="input-val" type="text" placeholder="填写联系人姓名" />
				</view>
			</view>
			<view class="form-item">
				<text class="label">手机号</text>
				<view class="form-input">
					<input v-model="detail.mobile" class="input-val" type="text" placeholder="填写联系人手机号" />
				</view>
			</view>
			<view class="form-item" @click="chooseLocation">
				<text class="label">联系地址</text>
				<view class="form-input">
					<text>{{detail.address_prefix}}</text>
				</view>
				<uni-icons type="icon-xiangyou" custom-prefix="iconfont"></uni-icons>
			</view>
			<view class="form-item">
				<text class="label">详细地址</text>
				<view class="form-input">
					<input v-model="detail.address" class="input-val" type="text" placeholder="街道、小区门牌号等" />
				</view>
			</view>
			<view class="form-item">
				<text class="label default">设为默认地址</text>
				<switch :checked="detail.is_default" class="switch" :color="themeColor.theme" @change="onChangeDefault">
				</switch>
			</view>

			<view class="btn-submit" @click="submit">
				<c-button :style="{'background': themeColor.theme}" size="medium" block>立即提交</c-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		treeData: [],
		id: 0,
		detail: {
			consignee: undefined,
			province: 0,
			city: 0,
			area: 0,
			town: 0,
			address: undefined,
			mobile: undefined,
			address_prefix: '点击选择您的地址',
			is_default: 0,
		},
		location: {
			province: '定位中...',
			city: '定位中...',
			area: '定位中...',
			town: '定位中...',
			street: '定位中...',
			address: '',
			areaCode: 5301,
		}, // 定位信息,
	});

	onLoad((opt) => {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getAreaList();
			getPosition();
		}
		if (opt.hasOwnProperty('id')) {
			state.id = opt.id;
			getDetail();
		}
	});

	//地图选点
	function chooseLocation() {
		return new Promise(resolve => {
			uni.chooseLocation({
				success: (e) => {
					resolve(e)
					console.log('成功', e)
					state.detail.address_prefix = e.address;
					state.detail.address = e.name;
					state.latitude = e.latitude;
					state.longitude = e.longitude;
					getPosition();
				},
				fail: (err) => {
					console.log('获取定位失败、用户取消', err)
				}
			})
		})
	}

	function getAreaList() {
		request.get('address/getAreaList').then(res => {
			state.treeData = res.data;
		})
	}

	function getDetail() {
		request.get('staff/info', {
			id: state.id
		}).then(res => {
			state.detail = res.data;
		})
	}

	function submit() {
		if (state.id) {
			request.put('staff/edit', state.detail).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 2000
				})
				pageRoute('/pages/merchant/staff/index');
			})
		} else {
			request.post('staff/add', state.detail).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 2000
				})
				pageRoute('/pages/merchant/staff/index');
			})
		}
	}

	function onchange(e) {
		state.detail.province = e.detail.value[0].value;
		state.detail.city = e.detail.value[1].value;
		state.detail.area = e.detail.value[2].value;
		state.detail.town = e.detail.value[3].value;
	}

	function onChangeDefault(e) {
		state.detail.is_default = e.detail.value;
	}

	function getPosition() {
		request.get('amapaddress/regeo', {
			longitude: cache.get('longitude') || '',
			latitude: cache.get('latitude') || '',
		}).then(res => {
			// console.log('地址逆解析', res);
			state.location = res.data;
		});
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	const {
		themeColor,
		treeData,
		id,
		detail,
		location
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.staff-form {
		padding: $margin-24;
		box-sizing: border-box;

		.form {
			min-height: 91vh;
			padding: 0 $margin-24;
			background-color: $bg-inverse-color;
			border-radius: $radius-16;

			.form-item {
				@include f-between;
				padding: $margin-32 0;
				border-bottom: 1rpx solid mix(#fff, $border-color, 50%);

				.label {
					width: 140rpx;

					&.default {
						width: 180rpx;
					}
				}

				.form-input {
					@include f-between;
					flex: 1;

					.input-val {
						flex: 1;
					}

					::v-deep .input-value-border {
						border: none;
						border-radius: 0;

						.placeholder {
							font-size: $font-28;
						}

						.input-arrow {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.switch {
					transform: scale(0.9);
				}
			}
		}

		.btn-submit {
			margin-top: $margin-32;
			padding: $margin-24;

			.c-button {
				margin-bottom: $margin-24;
			}
		}
	}
</style>